<div class="alain-default__content-title">
  <h1>
    Grid Masonry
    <small>Pure CSS and mobile first with a fallback to inline grid, Supported from IE10,
      <a href="//caniuse.com/#feat=multicolumn"
        target="_blank">browser compatibility</a>
    </small>
  </h1>
</div>
<div class="row-masonry row-masonry-xl-8 row-masonry-lg-5 row-masonry-md-4 row-masonry-sm-3 row-masonry-xs-2">
  <div class="col-masonry">
    <div class="box-placeholder">
      <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
      <p>Ipsum do ullamco laboris excepteur. Do incididunt commodo adipisicing officia sunt tempor. Deserunt exercitation proident
        enim veniam laboris fugiat ipsum veniam dolore duis sit duis. In deserunt ut nulla ad eu.</p>
    </div>
  </div>
  <div class="col-masonry">
    <div class="box-placeholder">
      <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
      <p>Veniam non sunt quis ex consequat ea esse duis esse. Ut incididunt eiusmod occaecat esse aute adipisicing culpa. Voluptate
        ullamco labore laboris et do in.</p>
    </div>
  </div>
  <div class="col-masonry">
    <div class="box-placeholder">
      <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
      <p>Esse elit et aute do aliqua ipsum cillum consectetur deserunt deserunt cupidatat aute aliqua aute. Aliquip ad incididunt
        dolor cupidatat quis officia cillum sit ex. Irure ut sit Lorem sunt nulla excepteur ipsum ipsum dolore cillum cupidatat
        ipsum. Do amet aliquip sunt consectetur nulla. Cupidatat ad consectetur veniam aliqua non ullamco laboris eiusmod.
        In voluptate officia aliquip dolore sit qui consectetur fugiat aliqua duis occaecat. Non mollit elit nisi ea mollit
        anim excepteur ut qui exercitation.</p>
    </div>
  </div>
  <div class="col-masonry">
    <div class="box-placeholder">
      <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
      <p>Ullamco incididunt do deserunt cillum veniam cillum amet ad. Deserunt laborum cupidatat mollit proident adipisicing
        in culpa consequat adipisicing et non. Aliqua ea elit voluptate esse aliqua dolor ipsum. Ut officia officia fugiat
        sint esse qui incididunt Lorem occaecat.</p>
    </div>
  </div>
  <div class="col-masonry">
    <div class="box-placeholder">
      <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
      <p>Ea non irure qui fugiat aliquip esse adipisicing. Cillum aliquip dolor non fugiat ad aliqua. In voluptate et non irure
        elit. Tempor qui sunt incididunt amet tempor sint et voluptate sunt qui sit culpa proident ipsum. Sunt duis pariatur
        officia ut magna pariatur fugiat dolor cillum laboris eu. Qui incididunt minim nostrud exercitation aliquip.</p>
    </div>
  </div>
  <div class="col-masonry">
    <div class="box-placeholder">
      <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
      <p>Fugiat commodo ad consectetur reprehenderit. Officia fugiat ea proident exercitation occaecat mollit laboris fugiat
        consequat deserunt anim ipsum magna ex. Esse do amet cillum aute ut ea.</p>
    </div>
  </div>
  <div class="col-masonry">
    <div class="box-placeholder">
      <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
      <p>Magna id fugiat laborum elit ullamco deserunt do laboris non qui. Duis et exercitation nulla labore cupidatat nostrud
        pariatur reprehenderit in nostrud. Consequat consequat consectetur mollit adipisicing. Laborum amet sit sint aliquip
        fugiat adipisicing enim reprehenderit. Voluptate nisi reprehenderit voluptate sit enim aute deserunt cupidatat et
        dolore labore voluptate id dolore.</p>
    </div>
  </div>
  <div class="col-masonry">
    <div class="box-placeholder">
      <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
      <p>Reprehenderit non ullamco quis non excepteur irure excepteur anim ullamco labore. Sit occaecat consectetur laborum
        consequat elit sint sit sunt. Duis aliquip magna ipsum consequat eiusmod officia.</p>
    </div>
  </div>
  <div class="col-masonry">
    <div class="box-placeholder">
      <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
      <p>Magna nostrud ex cupidatat id in non labore ad voluptate est irure tempor. Nostrud aliqua magna laborum incididunt
        deserunt veniam nulla nulla labore cillum. Id laboris Lorem dolore minim reprehenderit eu proident aliqua magna id
        aute aute. Aliqua est et nulla eu duis id laborum magna.</p>
    </div>
  </div>
  <div class="col-masonry">
    <div class="box-placeholder">
      <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
      <p>Sint pariatur eiusmod id sit est exercitation laboris mollit pariatur minim. Ex aliquip commodo nulla reprehenderit
        et laboris consequat pariatur culpa culpa proident ullamco laboris. Ex aliquip deserunt labore aliquip ea est sit
        quis amet tempor sunt amet. Id reprehenderit do elit sit consectetur. Aute amet sint tempor ipsum sint laboris est
        do culpa tempor. Pariatur fugiat aute officia et laboris voluptate sit nisi in anim excepteur amet eu.</p>
    </div>
  </div>
  <div class="col-masonry">
    <div class="box-placeholder">
      <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
      <p>Incididunt ut eu fugiat do deserunt voluptate id et est aliqua eu sint. Ad dolore excepteur ipsum nulla proident dolore
        aute sunt. Aute enim do dolor laborum id eiusmod sit.</p>
    </div>
  </div>
  <div class="col-masonry">
    <div class="box-placeholder">
      <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
      <p>Amet elit et ad amet nulla minim deserunt mollit adipisicing. Laboris non ipsum ad laborum non magna velit tempor cillum
        cillum. Proident dolore eiusmod ex elit cillum. Cupidatat duis pariatur ut id deserunt laboris. Culpa excepteur est
        deserunt eiusmod do do ut est labore eiusmod. Eu eu veniam excepteur mollit anim est velit nisi. Velit quis tempor
        laboris culpa.</p>
    </div>
  </div>
  <div class="col-masonry">
    <div class="box-placeholder">
      <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
      <p>Nostrud nulla nisi laboris officia anim nostrud nulla cupidatat veniam ea duis. Pariatur ea ullamco irure laborum.
        Consectetur labore in occaecat ullamco est fugiat nisi sunt deserunt. Non sunt dolor elit culpa dolore adipisicing.
        Fugiat mollit ex voluptate nulla deserunt dolore ea sunt commodo et qui laborum.</p>
    </div>
  </div>
  <div class="col-masonry">
    <div class="box-placeholder">
      <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
      <p>Quis pariatur ea nisi excepteur mollit nulla reprehenderit labore. Exercitation pariatur eu pariatur tempor deserunt
        ad occaecat ad in pariatur id et dolore. Enim veniam aute magna fugiat eiusmod velit quis. Laborum sit consequat
        dolore qui minim culpa aliqua pariatur cillum velit. Nostrud enim aliqua ut nisi consectetur pariatur fugiat do esse
        fugiat enim et tempor ad. Eiusmod ut incididunt proident labore sint sit culpa excepteur id. Fugiat mollit qui eu
        eu fugiat proident.</p>
    </div>
  </div>
  <div class="col-masonry">
    <div class="box-placeholder">
      <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
      <p>Tempor do officia magna do sunt. Nulla cillum anim excepteur adipisicing commodo culpa. Adipisicing pariatur qui voluptate
        consectetur mollit quis sunt enim veniam ullamco. Duis nostrud anim aliqua adipisicing fugiat aute excepteur deserunt
        enim occaecat pariatur ad. Qui aliquip aute labore minim ipsum in aute et. Aliqua laboris magna aute incididunt esse
        ex. Eu ipsum occaecat aliquip enim aute.</p>
    </div>
  </div>
  <div class="col-masonry">
    <div class="box-placeholder">
      <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
      <p>Labore cillum id non anim eiusmod officia. Nostrud laboris sint aliquip cillum magna. Minim sit labore proident culpa
        non nisi cillum non officia est. Proident elit sit adipisicing est cupidatat ex cupidatat labore aliqua ad.
      </p>
    </div>
  </div>
  <div class="col-masonry">
    <div class="box-placeholder">
      <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
      <p>Officia tempor ea adipisicing ad sit qui dolore consequat irure veniam. Est sit magna deserunt sint aute commodo fugiat
        fugiat irure sint dolore commodo amet. Duis cillum dolor quis consectetur dolor et et culpa id elit. Amet ut nulla
        sunt non in non duis sit fugiat consequat. Velit incididunt ullamco sunt deserunt nulla ad adipisicing. In fugiat
        ullamco deserunt amet. Ex voluptate amet magna minim ut incididunt veniam.</p>
    </div>
  </div>
  <div class="col-masonry">
    <div class="box-placeholder">
      <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
      <p>Occaecat anim do cillum est dolore sint. Do ut proident exercitation est incididunt irure duis ea laborum minim cillum
        est. Mollit irure non qui veniam labore eu elit veniam ea amet nisi esse labore. Elit ut nulla exercitation fugiat
        cupidatat non cupidatat sint id minim.</p>
    </div>
  </div>
  <div class="col-masonry">
    <div class="box-placeholder">
      <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
      <p>Voluptate incididunt tempor nulla voluptate esse dolor Lorem veniam voluptate adipisicing laborum in aliqua. Proident
        voluptate exercitation mollit consectetur qui commodo minim. Ea esse veniam velit minim reprehenderit incididunt
        reprehenderit do laborum aliqua. In quis et excepteur cupidatat qui duis. Pariatur Lorem laborum ut consectetur deserunt
        consectetur officia tempor commodo aliqua aliqua ipsum.</p>
    </div>
  </div>
  <div class="col-masonry">
    <div class="box-placeholder">
      <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
      <p>Ullamco officia esse ex reprehenderit reprehenderit cupidatat. Sunt excepteur sint consectetur ex aliqua excepteur.
        Laborum id cupidatat ea reprehenderit sit eiusmod ad exercitation ullamco nostrud. Nulla tempor voluptate magna amet
        culpa exercitation ad laborum in. Aliqua voluptate deserunt pariatur excepteur. Ullamco voluptate est dolore velit
        aliquip tempor nostrud deserunt. Minim excepteur dolor nulla commodo incididunt ex ullamco excepteur cillum veniam
        quis reprehenderit.</p>
    </div>
  </div>
</div>
<h3 class="my-md">Masonry with any kind of element</h3>
<div class="row-masonry row-masonry-xl-8 row-masonry-lg-5 row-masonry-md-4 row-masonry-sm-3 row-masonry-xs-2">
  <div class="col-masonry">
    <img src="assets/tmp/img/bg1.jpg" alt="" />
  </div>
  <div class="col-masonry">
    <div class="box-placeholder">
      <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
      <p>Proident est cillum magna qui pariatur. Deserunt ut voluptate sint aliquip anim nisi consequat. Elit laboris anim anim
        dolor incididunt. Nostrud qui labore qui cillum excepteur mollit excepteur consequat esse anim enim ad enim. Esse
        qui mollit et minim mollit laboris reprehenderit laborum fugiat do id. Mollit labore proident cupidatat aliqua dolore
        exercitation consectetur commodo sint mollit nostrud esse sunt. Nostrud fugiat duis sit excepteur excepteur mollit.</p>
    </div>
  </div>
  <div class="col-masonry">
    <img src="assets/tmp/img/bg2.jpg" alt="" />
  </div>
  <div class="col-masonry">
    <img src="assets/tmp/img/bg3.jpg" alt="" />
  </div>
  <div class="col-masonry">
    <img src="assets/tmp/img/bg4.jpg" alt="" />
  </div>
  <div class="col-masonry">
    <img src="assets/tmp/img/bg5.jpg" alt="" />
  </div>
  <div class="col-masonry">
    <img src="assets/tmp/img/bg6.jpg" alt="" />
  </div>
  <div class="col-masonry">
    <div class="box-placeholder">
      <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
      <p>Dolore consequat elit est qui dolore dolore tempor amet magna adipisicing non in commodo. Veniam sint et proident duis
        eu nulla commodo sunt duis aliquip eiusmod. Occaecat incididunt deserunt consectetur non aliquip velit ullamco eu
        sit labore proident exercitation. Cillum deserunt voluptate eu eiusmod sint in esse. Velit anim non Lorem proident
        eu sit nisi Lorem aute do sit ea. Esse nostrud amet excepteur occaecat incididunt amet laborum aliqua qui mollit
        ullamco. Labore incididunt ullamco non ipsum Lorem duis commodo adipisicing in.</p>
    </div>
  </div>
  <div class="col-masonry">
    <div class="box-placeholder">
      <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
      <p>Amet est dolor id esse veniam duis eu ex velit. Id qui deserunt voluptate veniam. Voluptate ea ipsum in eiusmod enim
        do velit commodo nulla sint. Fugiat ipsum esse pariatur voluptate exercitation magna ut proident consectetur et.
        Sint qui elit exercitation anim duis nulla commodo aliqua excepteur pariatur.</p>
    </div>
  </div>
  <div class="col-masonry">
    <img src="assets/tmp/img/bg7.jpg" alt="" />
  </div>
  <div class="col-masonry">
    <img src="assets/tmp/img/bg8.jpg" alt="" />
  </div>
  <div class="col-masonry">
    <div class="box-placeholder">
      <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
      <p>Culpa amet adipisicing consequat nisi dolore sunt amet labore officia aliquip elit tempor officia aliqua. Deserunt
        laborum enim ut laboris duis. Cillum non proident dolor ullamco cillum nostrud in sint aliqua cillum. Proident magna
        incididunt occaecat eiusmod cillum dolor tempor Lorem adipisicing nisi adipisicing mollit ex exercitation. Magna
        nostrud est sunt incididunt culpa. Duis nulla elit ut ea adipisicing duis esse ullamco.</p>
    </div>
  </div>
  <div class="col-masonry">
    <img src="assets/tmp/img/bg9.jpg" alt="" />
  </div>
  <div class="col-masonry">
    <img src="assets/tmp/img/bg10.jpg" alt="" />
  </div>
</div>
